1. 创建样式和样式表

• Selector(选择器)
• Declaration Block (声明块)
• Declaration (声明)
• Property (属性)
• Value (值)

1.1内部样式表和外部样式表

内部样式表：style

外部样式表：.css 扩展名

1.2 选择器

• 标签选择器：作用于摸个 HTML 标签在网页上的所有位置；
• 类型选择器（.）：区别标签，精确控制网页上某个具体元素；（必须以圆点开头；只允许使用字母、数字、连字符、下划线；圆点之后必须是字母；区分大小写）
• ID 选择器（#）：识别网页的特殊部分（如：横幅、导航栏、主要内容区域；必须以 #表示）
• 通用选择器（*）：选择每一个标签的通用选择器标志；
• 派生选择器：父级以下标签跟随父
• 群组选择器：一组标签
• 伪类和伪元素：（:hover 、:focus、:before、:after、::selection）
• 属性选择器：根据具备的属性给标签设置样式的方法；img[title]
• 子选择器（>）：类似派生选择器；（:first-child、:last-child、:ntd-child）
• 子类型选择器：与子选择器类似（:first-of-type、:last-of-type、:ntd-of-type）
• 同胞选择器（+）：同级周围同胞标签
• :not() :否定伪类，选择不是其他东西的某件东西；

2.文本格式化

优秀的网页排版应该使网站易于阅读，并且使人们看起来觉得很舒服。

• 使用字体 font-family，如果名称包含多个单词，必须用双引号（””）扣起来
• 使用 @font-face 指定 webfont 字体（font-weight、font-style）
• 使用 google font
• 给文本添加颜色:十六进制颜色值、 RGB 颜色值、RGBA、HSL、HSLA
• 文本字体大小:keyword、px、percentage、em (嵌套问题)
• 文本修饰:下划线、上划线等
• 间距:letter-spacing、word-spacing、line-height
• 文本阴影:text-shadow (水平偏移、垂直偏移、模糊度、颜色)
• 文本对齐、首行缩进、段落距离
• 列表定义样式

3. margin、padding 和 border

盒模型：web 浏览器将标签当成盒子

• padding:内容与边框线之间的距离
• border: 边框直线
• background-color: 标签背景
• margin: 一个标签与另一个标签之间的间距

margin/padding 使用时顺序 T R B L (避免 TROUBLE)，边距冲突，两个相邻的 margin 并不是相加，而是取其中较大的那个值。

• 块级盒子和行内盒子，利用 display 属性改变块级盒子和行内盒子的属性
• 边框线 border
• 背景色 background-color
• 圆角 border-radius
• 阴影 shadow 必须使用 pixel 或 em
• 用 overflow 属性控制溢出文本：Visible、scroll、auto、hidden
• clear 浮动

4. 装饰网站导航

• 链接状态：link、visited、hover、active
• 垂直、水平导航栏 display
• 变形 transform：rotate、scale、translate、skew、origin
• transtion 位移动画
• animation 动画：定义动画与应用到元素上